<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:javascript library="fullcalendar"/>
    <g:javascript library="moment"/>
    <g:javascript library="jqueryUI"/>
    <g:javascript library="jsTimezoneDetect"/>
    <g:javascript library="mustache"/>
    <title>日报系统</title>

</head>

<body>
<div class="container">
    <div class="row">
        <div class="span8">
            <div id="calendar"></div>
        </div>

        <div id="dialog"></div>

    </div>
</div>



<g:javascript>
        $(function() {
            var calendar = $('#calendar');
            calendar.fullCalendar({
                header : {
                    left : 'prev,next today',
                    center : 'title',
                    right : 'month,agendaWeek,agendaDay'
                },

                selectable : true,
                select : function(startDate, endDate, allDay, jsEvent, view) {
                    var content = prompt('请输入事件:');
                    if (!content) {
                        calendar.fullCalendar('unselect');
                        return;
                    }

                    var postData = {
                        title:content,
                        content : content,
                        start : startDate,
                        timeZone: jstz.determine().name(),
                        end : endDate,
                        allDay : allDay
                    } ;

                    var url = '<g:createLink controller="activity" action="save"/>';


                    $.ajax({
                      type: "POST",
                      url: url,
                      data: postData,
                      async:false,
                      success: function(data){
                        //data = eval('(' + data + ')');
                        calendar.fullCalendar('renderEvent', data);
                      },
                      dataType: 'json'
                    });


                },

                year : 2013,
                monthNames : ['一月', '二月', 'March', 'April', 'May', 'June', 'July', 'August', 'September', '十月', 'November', 'December'],
                monthNamesShort : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                dayClick : function() {

                },
                eventClick : function(event) {// 定义了点击日历项的动作，这里将会调用jQueryUi的dialog显示日历项的内容
                    var start = "";
                    var end = "";

                    //全天
                    if(event.allDay){
                      start = moment(event.start).format('YYYY-MM-DD');
                      if(event.end){
                        end = " 至 " + moment(event.end).format('YYYY-MM-DD');
                      }
                    }else{
                      start = moment(event.start).format('YYYY-MM-DD HH:mm:ss');
                      end = " 至 " + moment(event.end).format('YYYY-MM-DD HH:mm:ss');
                    }


                    var tpl = $('#dialogTpl').html();

                    var html = Mustache.render(tpl, {
                        id :event.id,
                        time: start + end,
                        content: event.content
                    });
                    $('#dialog').html(html).dialog('open');

                },
                eventRender : function(event, element) {
                    element.html('<g:showPortrait mini="true"/>' + event.content);

                },
                dayNames : ['星期天', '星期一', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                dayNamesShort : ['日', '一', '二', 'Wed', 'Thu', 'Fri', 'Sat'],
                editable : true,
                eventDragStop : function(event, jsEvent, ui, view) {
                    //console.log(event.source);
                },
                eventDrop : function(event, dayDelta, minuteDelta, allDay, revertFunc) {
                    // event是移动后的
                    alert(event.title + " was moved " + dayDelta + " days and " + minuteDelta + " minutes.");

                    if (allDay) {
                        alert("Event is now all-day");
                    } else {
                        alert("Event has a time-of-day");
                    }

                    if (!confirm("Are you sure about this change?")) {
                        revertFunc();
                    }

                },
                eventResize : function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
                    alert("The end date of " + event.title + "has been moved " + dayDelta + " days and " + minuteDelta + " minutes.");
                    if (!confirm("is this okay?")) {
                        revertFunc();
                    }
                }


            });

            $("#dialog" ).dialog({autoOpen:false});



            var currentView = calendar.fullCalendar('getView');
            console.log(currentView.start);
            console.log(currentView.end);
            console.log(currentView.visStart);
            console.log(currentView.visEnd);


            $.ajax({
              dataType: "json",
              url: "<g:createLink controller="activity" action="list"/>?format=json&date=" + moment(new Date()).formate('yyyy-MM-DD') + "&view=" +currentView.name,
              async:false,
              success: function( data ) {
                 calendar.fullCalendar('addEventSource',data);
            }
            });


        });


        function removeActivity(activityId){
              $.ajax({
              dataType: "text",
              url: "<g:createLink controller="activity" action="delete"/>?id=" + activityId,
              async:false,
              success: function( data ) {
                 data = eval('(' + data + ')');
                 if(data.errorInfo) {
                    alert(data.errorInfo);
                    return;
                 }
                 //页面上删除活动
                 $('#calendar').fullCalendar('removeEvents', activityId);
                 $('#dialog').dialog('close').html('');

            }
            });
         }  //removeEvent




</g:javascript>

<script type="text/template" id="dialogTpl">
    <div class="panel panel-default">
        <div class="panel-heading">
            {{time}}</div>
        <div class="panel-body">
            <g:showPortrait mini="true"/>{{content}}
        </div>
        <div class="panel-footer"><a class="btn btn-link btn-xs" href="javascript:;" onclick="removeActivity({{id}})">删除</a></div>
    </div>
</script>


</body>
</html>
